import React from 'react'
import {Col, Row,Radio } from "antd";

import {WeaLocaleProvider,WeaInputNumber,WeaCheckbox,WeaSelect,WeaColorPicker,WeaHelpfulTip} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

import showType0 from './img/showType0.png'
import showType1 from './img/showType1.png'
import showType2 from './img/showType2.png'
import showType3 from './img/showType3.png'
import showType4 from './img/showType4.png'
import showType5 from './img/showType5.png'
import showType6 from './img/showType6.png'


import weaPortal from 'weaPortal'

export default class SettingExtend extends React.Component{

    render (){
        const {setting,setSetting} = this.props
        const {showType,showNumberForRow,windowWidth,containerWidth=100,containerHeight=150,iconWidth='75',iconHeight='75',rowSpace='10',iconNameSpace='10', horizontalAlign,fontColor,titleIsAutoEnter='0',linkType} = setting
        const itemData = [
            {
                id: "0",
                name: getLabel('515771','上下布局-无背景色/分割线') ,
                filepath: showType0,

            },{
                id: "1",
                name: getLabel('515772','上下布局-有分割线') ,
                filepath: showType1,
            },{
                id: "2",
                name: getLabel('515773','上下布局-有背景色') ,
                filepath: showType2,
            },{
                id: "3",
                name: getLabel('515774','左右布局-无背景色/分割线') ,
                filepath: showType3,
            },{
                id: "4",
                name: getLabel('515775','左右布局-有分割线') ,
                filepath: showType4,
            },{
                id: "5",
                name: getLabel('515776','左右布局-有背景色') ,
                filepath: showType5,
            },{
                id: "6",
                name:  '上下布局-有边框',
                filepath: showType6,
            }
        ];
        return (
            <div className='quickEnter-settingExtend'>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@49s9g5`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@g9gxeh`} span={6} >
                            <div className="item-title">{getLabel(23724, '显示样式')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ipwlgc`} span={18}>
                            <weaPortal.EPortalBrowser ecId={`${this && this.props && this.props.ecId || ''}_undefined@oe634e`}
                                itemData={itemData}
                                title={getLabel('515780','选择元素样式') }
                                multiCheck={false}
                                disabled={false}
                                value={showType}
                                isShow={true}
                                onChange={(value)=>{
                                    let showType
                                    if(value == null || value == ''){
                                        showType = '1'
                                    }else{
                                        showType = value
                                    }
                                    let ww ={}
                                    if(!windowWidth || windowWidth==''){
                                        ww.windowWidth = window.outerWidth
                                    }
                                    setSetting({showType: showType,...ww})
                                }}
                            />

                        </Col>

                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@e9tw4o`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hwis66`} span={6}>
                            <div className="item-title">{getLabel('515778','每行显示数量')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8bvsq0`} span={4}>
                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@wey6g9`} value={showNumberForRow} min={0} onChange={(value)=>{setSetting({showNumberForRow:value})}}></WeaInputNumber>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@t5oql3`} span={1}>
                            <div style={{position: 'absolute', top: '6px',left:'10px'}}>
                                <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@o6hfd2`} title={getLabel('515779','为0时，根据元素宽度自动换行')}/>
                            </div>
                        </Col>

                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3g6igu`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@agkbwg`} span={6}>
                            <div className="item-title">{getLabel('521487','图标大小')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@24tvvl`} span={18}>
                            <div className='icon-width-label'>{getLabel('203','宽度')}:</div>
                            <div className='icon-width'>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@qalp2t`} value={iconWidth} min={0} onChange={(value)=>{setSetting({iconWidth:value})}}>
                                </WeaInputNumber>
                            </div>
                            <div className='icon-width-unit'>px</div>
                            <div className='icon-height-label'>{getLabel('207','高度')}:</div>
                            <div className='icon-height'>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ron3ln`} value={iconHeight} min={0} onChange={(value)=>{setSetting({iconHeight:value})}}>
                                </WeaInputNumber>
                            </div>
                            <div className='icon-height-unit'>px</div>
                        </Col>

                    </Row>
                </div>
                {
                    showType == 6 ? (
                        <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@h6m85b`}>
                            <div className="set-item">
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@c0dwib`} type="flex" middle="middle">
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@w1ymdz`} span={6}>
                                        <div className="item-title">{'容器'} :</div>
                                        <div className="middle-box"></div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@x246ce`} span={18}>
                                        <div className='icon-width-label'>{getLabel('203','宽度')}:</div>
                                        <div className='icon-width'>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@37xzc6`} value={containerWidth} min={0} onChange={(value)=>{setSetting({containerWidth:value,windowWidth:window.outerWidth})}}>
                                            </WeaInputNumber>
                                        </div>
                                        <div className='icon-width-unit'>px</div>
                                        <div className='icon-height-label'>{getLabel('207','高度')}:</div>
                                        <div className='icon-height'>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@kzly1z`} value={containerHeight} min={0} onChange={(value)=>{setSetting({containerHeight:value,windowWidth:window.outerWidth})}}>
                                            </WeaInputNumber>
                                        </div>
                                        <div className='icon-height-unit'>px</div>
                                    </Col>

                                </Row>
                            </div>
                            <div className="set-item">
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@6txi76`} type="flex" middle="middle">
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6t2y6b`} span={6}>
                                        <div className="item-title">{'间距'} :</div>
                                        <div className="middle-box"></div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2rqzex`} span={18}>
                                        <div className='icon-width-label'>{'行间距'}:</div>
                                        <div className='icon-width'>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@gdb5bh`} value={rowSpace} min={0} onChange={(value)=>{setSetting({rowSpace:value})}}>
                                            </WeaInputNumber>
                                        </div>
                                        <div className='icon-width-unit'>px</div>
                                        <div className='icon-height-label'>{'图标名称间距'}:</div>
                                        <div className='icon-height'>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@7ly8ir`} value={iconNameSpace} min={0} onChange={(value)=>{setSetting({iconNameSpace:value})}}>
                                            </WeaInputNumber>
                                        </div>
                                        <div className='icon-height-unit'>px</div>
                                    </Col>

                                </Row>
                            </div>
                        </React.Fragment>
                    ) : null
                }
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@e9bcar`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@emvuax`} span={6}>
                            <div className="item-title">{getLabel('19407','布局')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@i8dac4`} span={18}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@79qtl1`}
                                value={horizontalAlign}
                                options={[
                                    {key: '0',showname: getLabel('515777','靠左对齐') , selected: true},
                                    {key: '1', showname: getLabel('128965','居中对齐') }
                                ]}
                                detailtype = {3}
                                onChange={value => setSetting({horizontalAlign: value})}/>
                        </Col>
                    </Row>
                </div>

                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9rptfb`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@amjx8u`} span={6}>
                            <div className="item-title">{getLabel('2076','字体颜色')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qdi19x`} span={18}>
                            <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@4zoiza`}
                                value={fontColor}
                                onChange={(v)=> setSetting({fontColor: v})}
                            />
                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@u52cj9`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6vgisa`} span={6}>
                            <div className="item-title">{getLabel('521486','标题自动换行')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9wgque`} span={1}>
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@22n9wz`}
                                value={titleIsAutoEnter}
                                display="switch"
                                onChange={(value)=>{setSetting({titleIsAutoEnter: value})}}
                            />
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gis3fq`} span={1}>
                            <div style={{position: 'absolute', top: '3px',left:'10px'}}>
                                <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@q1la0j`} title={getLabel(522728, '开启时，内容来源标题过长时自动换行，最多显示两行，超出第二行的部分显示“...”；关闭时，超出首行的部分显示“...”')}/>
                            </div>
                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0trf90`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ob5xrv`} span={6}>
                            <div className="item-title">{getLabel('19494','链接方式')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@t0nu14`} span={18}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2wfi2v`}
                                value={linkType}
                                options={[
                                    {key: '0',showname: getLabel('19497','当前页') , selected: true},
                                    {key: '1', showname: getLabel('19498','弹出页') }
                                ]}
                                detailtype = {3}
                                onChange={value => setSetting({linkType: value})}/>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}